<template>
  <view class="w-750rpx m-a bg-#fff"
    :class="[{ 'dark-color': themeConfig.theme === 'dark' }]"
  >
    <view class="flex-sb pl-32rpx pr-32rpx pt-16rpx pb-16rpx relative">
      <view class="text-center">
        
        <base-img-box 
          :size="144" 
          :round="144" 
          :imgSrc="data.personAvatar && data.personAvatar.preUrl" 
          :thumbnailPreUrl="data.personAvatar && data.personAvatar.thumbnailPreUrl" 
        />
        <view class="relative inline-block font-size-24rpx font-500 mt-14rpx"
          :style="[`color: ${getStatus.color}`]"
        >
          <view class="position-l-center !-left-16rpx w-12rpx h-12rpx rounded-full"
            :style="[`background-color: ${getStatus.color}`]"
          ></view>
          {{ getStatus.status }}
        </view>
      </view>
      <view class="w-510rpx pt-14rpx">
        <view class="font-size-30rpx font-bold ellipsis-2">{{ data.datingTheme || '--' }}</view>
        <view class="mt-28rpx color-#666 font-size-24rpx">
          <i class="iconfont icon-dingwei inline-block font-size-24rpx mr-6rpx"></i>
          <text v-if="data.provinceName === data.cityName">{{ data.cityName }}{{ data.districtName }}</text>
          <text v-else>{{ data.provinceName }}{{ data.cityName }}{{ data.districtName }}</text>
        </view>
        <view class="mt-12rpx color-#666 font-size-24rpx">
          <!-- <i class="iconfont icon-shijian inline-block font-size-20rpx mr-6rpx"></i> -->
          开始时间:
          <text>{{ formatDate(new Date(data.startTime)) }}</text>
        </view>
        <view class="flex justify-end mt-10rpx">
          <view 
            class="px-16rpx rounded-full bg-#FFDDD0 btn-h-42 leading-0 flex-center color-#4D4D4D font-600"
            v-if="data.registered == 2"
          >已应约成功</view>
          <view 
            @click.stop="toUserDetail()"
            class="px-16rpx rounded-full btn-bg-gra btn-h-42 leading-0 flex-center color-white font-600"
            style="margin-left: 6rpx !important;"
            v-if="data.userId != user.userInfo.id"
          >了解发布者</view>
          <view 
            class="px-16rpx rounded-full btn-bg-gra btn-h-42 leading-0 flex-center color-white font-600"
            style="margin-left: 6rpx !important;"
            @click="handleClick"
          >了解约会详情</view>
          <!-- <view 
            v-if="!data.endFlag && data.registered == 1"
            class="btn-bg-gra btn-w-94 btn-h-42 leading-0 flex-center color-white !font-600"
            style="margin-left: 12rpx !important;"
            @click="handleClick"
          >应约</view> -->
        </view>
      </view>
    </view>
    <view class="border-1px"></view>
  </view>
</template>

<script lang="ts" setup>
import baseImgBox from "@/components/base/base-img-box.vue";
import { useThemeStore, useUserStore } from '@/store';
import { formatDate } from "@/utils";
import { useToast } from "wot-design-uni";

// 主题颜色
const { themeConfig } = useThemeStore();
const toast = useToast();
const user = useUserStore();

const emit = defineEmits(['end'])
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
})

const getStatus = computed(() => {
  const { endFlag, registered, startTime } = props.data || {};
  const _startTime = +new Date(startTime);
  const currentTime = +new Date();
  if (endFlag) return { status: '已结束', color: '#F7622B' };
  if (currentTime < _startTime) {
    return { status: '未开始', color: '#999' };
  } else {
    return { status: '进行中', color: '#9f7aea' };
  }
})

const handleClick = () => {
  // if (props.data.endFlag) {
  //   emit('end');
  //   return;
  // }
  uni.navigateTo({ 
    url: `/activity/appointmentDetail?id=${props.data.id}`
  })
}

// 跳转用户详情
const toUserDetail = () => {
  if (!user.isLogined) {
    uni.navigateTo({ url: '/pages/login/index' });
    return
  }
  const id = props.data.userId;
  uni.navigateTo({ 
    url: `/activity/userDetail?id=${id}`
  })
}
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
</style>
